<template>
  <div class="tabs-container">
    <b-tabs @input="handleChangeTab" card>
      <b-tab title="三维模型" active id="first">
        <Model
          v-if="isShowModel"
          :MTLLoaderPath="data.MTLLoaderPath"
          :MTLLoaderFile="data.MTLLoaderFile"
          :OBJLoaderPath="data.OBJLoaderPath"
          :OBJLoaderFile="data.OBJLoaderFile" />
      </b-tab>
      <b-tab title="图片欣赏" id="third">
        <div class="panel-images">
          <viewer :images="data.images">
            <b-row class="justify-content-md-start">
              <b-col v-for="(item, i) in data.images" :key="i" xs="12" sm="6" md="3" lg="2" class="item-col">
                <img :src="item" :key="item">
              </b-col>
            </b-row>
          </viewer>
        </div>
      </b-tab>
      <b-tab title="视频欣赏" id="fourth">
        <Video v-if="isShowVideo" :url="data.videoUrl" ref="video" />
      </b-tab>
      <b-tab title="作品简介" id="second">
        <Article :data="data.article" :isShowInfo="false" :isShowPrevNext="false" />
      </b-tab>
    </b-tabs>
  </div>
</template>

<script>
import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
import Model from '@/components/model.vue'
import Article from '@/components/article.vue'
import Video from '@/components/video.vue'

Vue.use(Viewer)

export default {
	components: {
    Model,
    Article,
    Video
	},

  props: {
    data: {
      type: Object,
      default () {
        return {
          article: {
            title: '',
            content: ''
          },
          MTLLoaderPath: '', // 示例：/mock/models/B1/
          MTLLoaderFile: '', // 示例：/B1-1.mtl
          OBJLoaderPath: '', // 示例：/mock/models/B1/
          OBJLoaderFile: '', // 示例：/B1-1.obj
          images: [],
          videoUrl: '' // 示例：/mock/videos/p5l3ki3mjtghm.mp4
        }
      }
    }
  },

  data () {
    return {
      isShowModel: false,
      isShowVideo: false
    }
  },

  mounted () {
    this.renderModel()
  },

  methods: {
    // 切换页签
    handleChangeTab (index) {
      if (index === 3) {
        if (!this.isShowVideo) {
          this.buildVideo()
        }
      }
    },
    // 模型渲染
    renderModel () {
      setTimeout(() => {
        this.isShowModel = true
      }, 500)
    },
    // 建立播放器
    buildVideo () {
      this.isShowVideo = true
      this.$nextTick(() => {
        this.$refs.video.build()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.tabs-container {
  min-height: 20vh;
  background: none;
  .panel-images {
    .item-col {
      padding: 16px 12px;
      text-align: center;
    }
    img {
      max-width: 100%;
    }
  }
  /deep/ .article {
    .detail-content {
      overflow: hidden;
      p:first-child {
        text-indent: 24px;
      }
      img {
        display: block;
        margin: 0 auto;
      }
    }
  }
}
</style>
